<template>
  <div class="tabbar">
    <div class="tasklist" v-for="(item,index) in tasklist" :key="index">
      <span :class="{active:suoyin == index }"  @click="handleclick(index)">{{item}}</span>
    </div>
    
  </div>
</template>

<script>
export default{
  data(){
    return{
      tasklist:['首页','爆爆团','订单','我的'],
      suoyin:0 
    }
  },
  methods: {
    handleclick(index){
        this.suoyin = index
    }
  }
}
</script>

<style scoped>
.tabbar{
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
}
.tabbar .tasklist span{
  display: block;
  margin-top: 25px;
  color: gray;
}
.tabbar span.active{
  color: rgb(84, 140, 192);
}
</style>